<div class='datetimepicker datetimepicker-dropdown dropdown-menu' :css="{display : @isShow ? 'block' : 'none',left : @left,top : @top,bottom : @bottom}"
	:class="['datetimepicker-dropdown-' + @position]">
	<table class='table-condensed'>
		<thead>
			<tr>
				<th :click='@dealYear(-1)'>
					<i class='glyphicon glyphicon-backward'></i>
				</th>
				<th :click='@dealMonth(-1)'>
					<i class="glyphicon glyphicon-chevron-left"></i>
				</th>
				<th class="switch" colspan='3'>
					<div class='switch-txt' :click="@toggleMonthyear">{{@year}}{{@yearText}}{{@monthName[@month - 1]}}</div>
					<div class='datetimepicker-monthyear datetimepicker datetimepicker-dropdown dropdown-menu datetimepicker-dropdown-bottom-center'  :css="{display : @isMonthyearShow ? 'block' : 'none'}">
						<table class='table-condensed'>
							<tbody>
								<tr :for="($index,el) in @yearScope">
									<td :if="$index !== @yearScope.length - 1" colspan='2' :click="@setYear(el.value)"
										:css="{background:@year === el.value ? '#eee' : ''}">{{el.value}}{{@yearText}}</td>
									<td :if="$index === @yearScope.length - 1" :click='@setYearScope(-5)'>
										<i class='glyphicon glyphicon-chevron-left'></i>
									</td>
									<td :if="$index === @yearScope.length - 1" :click='@setYearScope(5)'>
										<i class='glyphicon glyphicon-chevron-right'></i>
									</td>
									<td :click="@setMonth(2 * $index + 1)" 
										:css="{background:@month === 2 * $index + 1 ? '#eee' : ''}">{{@monthName[2 * $index]}}</td>
									<td :click="@setMonth(2 * $index + 2)"
										:css="{background:@month === 2 * $index + 2 ? '#eee' : ''}">{{@monthName[2 * $index + 1]}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</th>
				<th :click='@dealMonth(1)'>
					<i class='glyphicon glyphicon-chevron-right'></i>
				</th>
				<th :click='@dealYear(1)'>
					<i class="glyphicon glyphicon-forward"></i>
				</th>
			</tr>
		</thead>
		<tbody :visible="@format.indexOf('dd') !== -1">
			<tr>
				<th class='dow' :for="el in @weekdaysName">{{el}}</th>
			</tr>
			<tr :for="el in @data">
				<td class='day' :for="day in el" :class="{old : day.month < @month,'new' : day.month > @month,active : day.selected}" :click="@chooseDay(day)">
					{{day.value}}
				</td>
			</tr>
		</tbody>
	</table>
	<div class='datetimepicker-time' :visible="@format.indexOf('hh') !== -1 || @format.indexOf('mm') !== -1 || @format.indexOf('ss') !== -1">
		<i class='glyphicon glyphicon-time'></i>
		<input class="input-hour" type="text" :duplex="@hour" :on-focus="@focusInput" :on-keyup="@keyup($event,'hour')">
		<span :visible="@format.indexOf('mm') !== -1">:</span>
		<input class="input-minute" type="text" :duplex="@minute" :on-focus="@focusInput" :on-keyup="@keyup($event,'minute')" :visible="@format.indexOf('mm') !== -1">
		<span :visible="@format.indexOf('ss') !== -1">:</span>
		<input class="input-second" type="text" :duplex="@second" :on-focus="@focusInput" :on-keyup="@keyup($event,'second')" :visible="@format.indexOf('ss') !== -1">
	</div>
	<div class='datetimepicker-btn text-right'>
		<button type='button' class='btn btn-default btn-sm' :click="@clear">清空</button>
		<button type='button' class='btn btn-default btn-sm datetimepicker-btn-today' :click='@setToday'>今天</button>
		<button type='button' class='btn btn-default btn-sm' :click='@isShow = false'>取消</button>
	</div>
</div>